webpack学习笔记1

webpack作用

webpack可以将前端工程中所有的静态资源打包成为一个或者多个js，静态资源包括css、图片等。

为什么要使用webpack，没有打包工具之前，页面之中使用ES6、SCSS、TypeScript等浏览器不支持的前端新语法的时候都非常困难，有了webpack就可以非常方便的在项目之中使用这些新的语法，从而提升前端项目开发的速度和质量。另外在webpack之中项目中所有的资源都是模块，包括js，还包括css、图片等等。只要有合适的loader去处理这些静态资源就可以了。webpack还提供了插件的功能，丰富了webpack的功能。以上的这些让webpack成为前端项目构建工具的主流和首选，gulp和grunt可能成为了历史。头部资源终将占据统治地位，webpack成为前端项目构建工具的头部资源。

模块化编程

模块的概念是将程序拆解为离散的功能块，通常称这些功能块为模块。模块相对于程序而言，具有更小的体积，单个模块具有清晰的目的，方便进行开发、测试、维护等工作。模块的功能经过了抽象，提高了代码的复用能力。

模块的打开姿势

webpack支持常见的模块依赖，如es5的import，commonjs的require，css文件的@import，样式中的url。webpack能够支持的模块有webpack常见的loader

webpack核心概念

entry 入口文件

webpack是通过递归的方式来找出所有依赖之间的关系，并构建依赖图。需要在配置文件中指定使用哪个模块作为依赖图的起始，进入起始依赖后就可以根据起始模块中指定的依赖来将其他依赖将入进来。多个入口匹配单一输出：entry:'./src/script/main.js'，在main.js之中可以使用require或者其他方法例如import来导入其他的文件。
module.export = {entry:'./index.js'}

当存在多个入口的时候呢，可以使用entry:[]的形式。
多个入口文件匹配多个输出结果：entry必须采用对象的方式，这样可以使用对象的key作为出口文件的文件名。并在不同的文件中使用这些不同的输出。示例：entry：{page1:'a.js',page2:'b.js'}，output:{path:'输出结果的绝对路径',filename:[name].js}这里必须使用占位符来达到生成不同文件的效果，为了显示多次输出的不同版本号可以使用[hash]占位符。
hash值采用md5算法，即根据文件中内容来改变。

output 输出文件

output指定了最终要将打包好的js放在什么路径下，默认是dist。路径指定的是绝对路径，需要通过nodejs的path模块来获取当前的文件路径。
const path = require('path')
module.export = {output:{path:path.resolve(__dirname,'dist'),filename:'bundle.js'}}

loader 加载器（中间件）

loader让webpack有能力去处理费JavaScript文件，webpack本身只能理解JavaScript。丰富loader（官方的和第三方）可以将所有类型的文件都转化为webpack可以理解的JavaScript，webpack发挥的作用是将JavaScript和转化为JavaScript的资源按照相互依赖的关系打包。
并且这些loader之间可以灵活的组装，开发者可以根据自己的需求灵活的定义loader的构成。loader的配置方法为
module.export = {

module:{
    rules:[
        {
            test:\.js$\,
            loader:'babel-loader'
        },
        {
            test:\.css$\,
            loader:'style-loader!css-loader'
        }
    ]
}

}
配置文件告诉webpack当遇到符合test对应正则表达式的文件时，先使用对应的loader转化一下。

babel-loader的使用方法

安装babel loader来处理es6的语法，安装npm较多，包括babel-loaderbabel-core\
babel-loader可以通过参数presets（预设）来指定es6的版本，可选的参数有：'es2015','es2016','es2017','latest'。在使用preset的时候不仅需要通过config.js来指定使用何种preset，还需要安装相关的preset的npm包。例如安装preset为latest的的npm包，命令是：npm install babel-preset-latest --save-dev

plugin 插件

还有一部分工作是loader不能完成，例如压缩、打包优化、重新定义环境中的变量等等。可以说plugin的能力是loader的父集。使用plugin的方式是先引入插件模块，通过require。然后在配置对象的plugin中创建插件的实例。
const htmlWebpackPlugin = require('html-webpack-plugin')
module.export = {

plugin:[
    new htmlWebpackPlugin({template:'./index.html'})
]

}

plugin接受一个数组作为其value，数组中是各个插件的构造函数，可以在这些构造函数传入相关的参数来达到目的。例如通过使用html-webpack-plugin来实现自动引入打包的内容，不再使用手动的方式来实现。还可以加入[hash]来保证引入文件的命名的唯一性，从而可以保证上线时候引用的是最新的版本。

html-webpack-plugin的参数有：
{filename:'生成的文件名',
title:'文件中的title',
template:'以什么文件作为其模板',
chunks:['使用什么chunk'],
excludeChunks:['排除什么chunk']
inject:['chunk的引用放在什么地方']
}

webpack命令行的一些参数

• 1.指定特定文件的loader： --module-bind 'css=style-loader!css-loader'
• 2.显示打包进程： --progress
• 3.显示所有打包模块： --display-modules
• 4.显示打包原因： --display-reasons
• 5.指定打包配置文件： --config
• 6.自定义命令行脚本：在package.json之中来定义